$(document).ready(function() {
	$( ".maplist-container" ).addClass("ui-widget");
	$.getJSON('assets/data/farmer.json', function(data){
		var mark = "images/mark_a.png";
	    $.each(data.farmers, function(index, farmer){
			$( ".farmers-list" ).append(
				'<div class="top_block list-item">'+
				'	<div class="maplist-content">'+
				'		<div class="left_block item-image">'+
				'			<div class="maplist-content">'+
				'				<img src="'+farmer.image+'">'+
				'			</div>'+
				'		</div>'+
				'		<div class="right_block item-container">'+
				'			<div class="maplist-content">'+
				'				<div class="left_block item-mark">'+
				'					<div class="maplist-content">'+
				'						<img src="'+mark+'" width="21px">'+
				'					</div>'+
				'				</div>'+
				'				<div class="right_block item-content">'+
				'					<div class="maplist-content">'+
				'						<a href="farmerInformation.html?id_farmer='+farmer.id+'">'+
											farmer.name+'</a>'+
				'						<p>'+farmer.extension+'<br />'+
											farmer.summary+'</p>'+
				'					</div>'+
				'				</div>'+
				'			</div>'+
				'		</div>'+
				'	</div>'+
				'</div>'
			);
			if(mark==="images/mark_a.png"){
				mark="images/mark_b.png";
			}else if(mark==="images/mark_b.png"){
					mark="images/mark_c.png";
				}else{
					mark="images/mark_a.png";
				}
	    });
	}).done(function(){
		$( ".item-container, .item-image img" ).addClass("ui-corner-all ui-widget-content");
		$( ".list-header, .list-item .item-image" ).hide().show("fade",1000);
		$( ".list-item .item-container .item-content" ).hide().show("slide",1000);
		$( ".map-container" ).hide().show("fade",1000);
		$( ".list-pagination" ).hide().show("drop",1000);
		$( ".farmers-list" ).show();
		loadPagination();
		var idx = [0,1,2];
		loadMap(idx);
	}).fail(function(){
		alert("Fail: maybe the farmers data does not exists or is not json...");
	});
});